import React, {PropTypes} from 'react'
import {connect} from 'dva'
import {hashHistory,routerRedux} from 'dva/router'
import {Layout,Form, Input, Select, Menu,Button, Row, Col, Icon, Modal, Spin, Collapse ,} from 'antd'
import {PageLabel, BoxLabel} from '../../components/cor'
// import '../../components/cor/cms.less'
const FormItem = Form.Item;
const confirm = Modal.confirm;
const Panel = Collapse.Panel;

function configColum({location, dispatch, form, configColum}) {
  if (!configColum) {
    return null;
  }
  const {firstDetail, detailLoading, fundList, lookMuens,filterArr,tableHeadArr,projectList, columnList} = configColum;
  const {getFieldDecorator, validateFields, getFieldsValue} = form;
  const actionTypeHead = 'configColum/';
  const pageLabelProps = {
    isCorTable: true,
    current: lookMuens.name + ' 配置信息',
  };
  const filterEle = (data) =>{
    var filters = [];
    for (var i=0;i<filterArr.length;i++){
      var obj = {};
      obj.displayName = data["filterName-"+i];
      obj.field = data["filterItemField-"+i];
      obj.type = data["filterItemType-"+i];
      obj.defaultValue = '';
      obj.multiple = false;
      obj.url = data["filterItemUrl-"+i];
      if(obj.field){
        filters.push(obj);
      }
    }
    return filters
  };
  const tableHeadEle=(data) =>{
    var filters = [];
    for (var i=0;i<tableHeadArr.length;i++){
      var obj = {};
      obj.displayName = data["tableItemName-"+i];
      obj.fieldName = data["tableItemField-"+i];
      if(obj.fieldName){
        filters.push(obj);
      }
    }
    return filters
  };
  const submitHandle = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {...getFieldsValue()};
      var dataParam = {
        id:firstDetail.id ? firstDetail.id:null,
        menuId:lookMuens.id,
        url:data.FilesUrl,
        paramFilters:filterEle(data),
        tableHeads:tableHeadEle(data),
        Operation:[],
      };

      dispatch({
        type: `${actionTypeHead}add`,
        payload: {
          ...dataParam
        }
      })
    })
  };
  // 取消
  const cancelHandle = () => {
    Modal.confirm({
      title: '确定放弃新增数据?',
      content: null,
      onOk() {
        hashHistory.goBack();
      },
      onCancel() {
      },
    });
  };
  const addFilter = (inedx,type) => {
    dispatch({
      type: `${actionTypeHead}managerFilterItem`,
      payload: {
        idx : inedx,
        type: type
      }
    });
  };
  // 筛选条件列表动态生成
  const filterItem = ()=>{
    return filterArr.map((value,index)=>{
      var aa =  Math.round(Math.random()*100);
      return (<div key={index}>
        <Row gutter={16}>
          <Col className="gutter-row" span={5}>
            <FormItem hasFeedback>{getFieldDecorator('filterName-'+ index, {initialValue: (value && value.displayName) || '', rules: [{ message: '描述',},],})(<Input  placeholder="请输入描述"/>)}</FormItem>
          </Col>
          <Col className="gutter-row" span={5}>
            <FormItem hasFeedback>{getFieldDecorator('filterItemField-'+ index , {initialValue: (value && value.field) || '', rules: [{ message: '字段'}]})(<Input placeholder="请输入字段"/>)}</FormItem>
          </Col>
          <Col className="gutter-row" span={5}>
            <FormItem hasFeedback>{getFieldDecorator('filterItemType-' + index, (value && value.type) ? {initialValue: value.type + '',} : null)(
              <Select allowClear multiple={false} style={{width: '100%'}} placeholder="其他">{fundList.map((item, key) => {return <Select.Option key={key + ''} value={item.value + ''}>{item.text}</Select.Option>})}</Select>)}
            </FormItem>
          </Col>
          <Col className="gutter-row" span={5}>
            <FormItem>{getFieldDecorator('filterItemUrl-'+ index, {initialValue: (value && value.url) || ''})(<Input  placeholder="当选择select类型时,请输入其对应接口"/>)}</FormItem>
          </Col>
          <Col className="gutter-row" span={4}>
            <FormItem hasFeedback><span style={{fontSize: "20px",marginLeft: "41px"}} onClick={addFilter.bind(this,index,'filterItemAdd')}><Icon style={{color:'white'}} type="plus-circle-o" /></span><span style={{fontSize: "20px",marginLeft: "20px"}} onClick={addFilter.bind(this,index,'filterItemDelete')}><Icon style={{color:'white'}} type="delete"/></span></FormItem>
          </Col>
        </Row>
      </div>)
    })
  };
  // 表单头动态生成
  const tableItem = ()=>{
    return tableHeadArr.map((value,index)=>{
      return (<div key={index}>
        <Row gutter={16}>
          <Col className="gutter-row" span={10}>
            <FormItem hasFeedback>{getFieldDecorator('tableItemName-'+ index, {initialValue: (value && value.displayName) || '', rules: [{required: true, message: '描述',},],})(<Input  placeholder="请输入描述"/>)}</FormItem>
          </Col>
          <Col className="gutter-row" span={10}>
            <FormItem hasFeedback>{getFieldDecorator('tableItemField-'+ index , {initialValue: (value && value.fieldName) || '', rules: [{required: true, message: '字段',},],})(<Input placeholder="请输入字段"/>)}</FormItem>
          </Col>
          <Col className="gutter-row" span={4}>
            <FormItem hasFeedback><span style={{fontSize: "20px",marginLeft: "40px"}} onClick={addFilter.bind(this,index,'tableItemAdd')}><Icon style={{color:'white'}} type="plus-circle-o" /></span><span style={{fontSize: "20px",marginLeft: "20px"}} onClick={addFilter.bind(this,index,'tableItemDelete')}><Icon style={{color:'white'}} type="delete"/></span></FormItem>
          </Col>
        </Row>
      </div>)
    })
  };
  // 根据项目ID获取对应的栏目内容
  function handleChange(value) {
    dispatch({
      type: `${actionTypeHead}getColumnList`,
      payload: {
        id : value
      }
    });
  }
  // 路由跳转
  function  handleClick(value) {
    if(value.key){
      var params = value.key.split(',');
      dispatch(routerRedux.push('/configColumAdd/'+ params[0] +"/" + params[1]));
    }
  }
  const formItemLayout = {
    labelCol: {
      xs: { span: 1 },
      sm: { span: 1 },
    },
    wrapperCol: {
      xs: { span: 23 },
      sm: { span: 23 },
    },
  };
  return (
    <div className="content-inner">
      <Spin spinning={detailLoading}>
        <Row className="marginB16 bgcWhite">
          <PageLabel {...pageLabelProps} />
          <div className="noTopBorder">
            <div className="tabContent">
              <Form layout="horizontal">
                <Collapse>
                  <Panel header="基本信息" key="1">
                    <Row gutter={16}>
                      <Col className="gutter-row" span={12}>
                        <FormItem label="功能名称 :" hasFeedback>
                         <div className="fswhite">{lookMuens && lookMuens.name}</div>
                        </FormItem>
                      </Col>
                      <Col className="gutter-row" span={12}>
                        <FormItem label="链接地址 :" hasFeedback>
                          <div className="fswhite">{(lookMuens && lookMuens.href)|| '-------'}</div>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col className="gutter-row" span={12}>
                        <FormItem label="描述 :" hasFeedback>
                          <div className="fswhite">{(lookMuens && lookMuens.description)||'-------'}</div>
                        </FormItem>
                      </Col>
                      <Col className="gutter-row" span={12}>
                        <FormItem label="顺序 :" hasFeedback>
                          <div className="fswhite">{(lookMuens && lookMuens.orderOn)|| '-------'}</div>
                        </FormItem>
                      </Col>
                    </Row>
                  </Panel>
                  <Panel header="列表配置(一级)" key="2">
                    <div>
                      <Row gutter={16}>
                        <FormItem label="列表接口：" hasFeedback>
                          {getFieldDecorator('FilesUrl', (firstDetail !== null && firstDetail.url) ? {
                            initialValue: firstDetail.url + '',
                          } : null)(<Input placeholder="请输入模块接口"/>)}
                        </FormItem>
                      </Row>
                    </div>
                    <BoxLabel text="筛选条件"/>
                    <Row gutter={16} justify="center"  style={{marginBottom : "11px"}}>
                      <Col className="gutter-row" span={5}>
                        <label>描述</label>
                      </Col>
                      <Col className="gutter-row" span={5}>
                        <label>字段</label>
                      </Col>
                      <Col className="gutter-row" span={5}>
                        <label>类型</label>
                      </Col>
                      <Col className="gutter-row" span={5}>
                        <label>接口</label>
                      </Col>
                      <Col className="gutter-row" push={1} span={3}>
                        <label>操作</label>
                      </Col>
                    </Row>
                    {filterItem()}
                    <BoxLabel text="列表表头"/>
                    <Row gutter={16}>
                      <Row gutter={16} justify="center"  style={{marginBottom : "11px"}}>
                        <Col className="gutter-row" span={10}>
                          <label>描述</label>
                        </Col>
                        <Col className="gutter-row" span={10}>
                          <label>字段</label>
                        </Col>
                        <Col className="gutter-row" push={1} span={3}>
                          <label>操作</label>
                        </Col>
                      </Row>
                      {tableItem()}
                      <div style={{paddingTop: '24px'}}>
                        <Button size={'large'} type="primary" onClick={submitHandle}>保存</Button>
                      </div>
                    </Row>
                  </Panel>
                  <Panel header="栏目内容配置(二级)" key="3">
                    <Row gutter={16}>
                      <Col className="gutter-row" span={24}>
                        <FormItem label="项 目 :" {...formItemLayout} hasFeedback>
                          {getFieldDecorator('project')(
                            <Select
                              allowClear
                              multiple={false}
                              style={{width: '100%'}}
                              placeholder="请选择项目"
                              onChange={handleChange}
                            >
                              {
                                projectList.map((item, key) => {
                                  return <Select.Option key={key + ''} value={item.id + ''}>{item.description}</Select.Option>
                                })
                              }
                            </Select>)}
                        </FormItem>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col className="gutter-row colmusComent" span={24}>
                        <div className="colmus">栏目内容</div>
                        <Layout.Sider width="100%">
                          <Menu mode="inline" onClick={handleClick} style={{background: "rgb(28, 66, 96)",color:"white",borderBottom : "1px solid rgba(254, 182, 203, 0.15)"}}>
                            {/*{ columnList.length == 0 ? <div className="colmusnoData">暂无数据</div> : columnList.map((item, key) => {return <Menu.Item key={item.typeId + ''} ><span className="nav-text">{item.title}</span></Menu.Item>})}*/}
                            { columnList.length == 0 ? <div className="colmusnoData">暂无数据</div> : columnList.map((item, key) => {return <Menu.Item key={item.typeId + ',' + item.title} ><span className="nav-text">{item.title}({item.typeId})</span></Menu.Item>})}
                          </Menu>
                        </Layout.Sider>
                      </Col>
                    </Row>
                  </Panel>
                </Collapse>
              </Form>
            </div>
          </div>
        </Row>
      </Spin>
    </div>
  )
}

function mapStateToProps({configColum}) {
    return {configColum}
}

export default Form.create({})(connect(mapStateToProps)(configColum))
